<template>
  <div :style="{height:app_height}">
    <nut-tab class="cusAndCar-info-tab" @tab-switch="tabSwitch">
      <nut-tab-panel tab-title="客户信息">
        <div>
          <nut-cell :desc="cusInfo.idCardName" title="客户名称"/>
          <nut-cell :desc="cusInfo.idCardSex" title="车主性别"/>
          <nut-cell :desc="cusInfo.mobile" title="客户手机号"/>
          <nut-cell :desc="cusInfo.idCardFontImage" title="地址"/>
          <nut-cell :desc="cusInfo.birth" title="生日"/>
        </div>
      </nut-tab-panel>
      <nut-tab-panel tab-title="车辆信息">
        <div>
          <nut-collapse v-model="activeName" :accordion="true">
            <nut-collapse-item v-for="car in carList" :key="car.index" :name="car.vin" :title="car.vehicleNo">
              <nut-cell :desc="car.chassisNo" title="底盘号"/>
              <nut-cell :desc="car.ownerProperty" title="客户类别"/>
              <nut-cell :desc="car.brandName" title="品牌"/>
              <nut-cell :desc="car.vehicleModelName" title="车型"/>
              <nut-cell :desc="car.saleDate" title="购买时间"/>
              <nut-cell :desc="car.saleAgentDesc" title="购买销售商"/>
              <nut-cell :desc="car.isBigCustomer" title="是否大客户"/>
              <nut-cell :desc="car.bigCustomerName" title="大客户名称"/>
              <nut-cell :desc="car.isNewEnergy" title="是否新能源车"/>
              <nut-cell :desc="car.roCreateDate" title="车辆最近进厂时间"/>
              <nut-cell :desc="car.inMileage" title="车辆最近进厂里程"/>
              <nut-cell :desc="car.totalMileage" title="预估当前里程"/>
              <nut-cell :desc="car.openState" title="开通状态"/>
            </nut-collapse-item>
          </nut-collapse>
        </div>
      </nut-tab-panel>
    </nut-tab>
  </div>
</template>
<script>
import {
  doLogin,
  sdkConfig,
  sdkAgentConfig
} from '@/api/admin/auth/wechat/wechatAuthentication'
import {
  queryCusAndCarsInfo
} from '@/api/admin/org/weChat/wechatReportQuery'
export default {
  name: 'CusAndCarInfo',
  data() {
    return {
      activeName: 0,
      app_height: `${document.body.offsetHeight}px`,
      cusInfo: {
        idCardName: '',
        idCardSex: '',
        mobile: '',
        idCardFontImage: '',
        birth: ''
      },
      carList: [],
      carInfo: {
        vin: '',
        ownerProperty: '',
        vehicleNo: '',
        chassisNo: '',
        brandName: '',
        vehicleModelName: '',
        saleDate: '',
        saleAgentDesc: '',
        isBigCustomer: '',
        bigCustomerName: '',
        isNewEnergy: '',
        roCreateDate: '',
        inMileage: '',
        totalMileage: '',
        openState: ''
      }
    }
  },
  mounted() {
    this.queryDataInfo()
  },
  methods: {
    tabSwitch: function(index, event) {
      console.log(index + '--' + event)
    },
    queryDataInfo() {
      const that = this
      Promise.all([
        this.doLogin(),
        this.getCusId()
      ]).then((promiseres) => {
        if (sessionStorage.getItem('EXTERNAL_USERID') && sessionStorage.getItem('FU_USERID')) {
          queryCusAndCarsInfo({
            EXTERNAL_USERID: sessionStorage.getItem('EXTERNAL_USERID'),
            FU_USERID: sessionStorage.getItem('FU_USERID')
          }).then(res => {
            if (res.STATUS == 'S') {
              if (res.USERINFO) {
                that.cusInfo = res.USERINFO
              }
              if (res.CARLIST) {
                that.carList = res.CARLIST
              }
            } else {
              this.$dialog({
                id: 'my-dialog',
                content: res.ERROR_MESSAGE,
                noOkBtn: true,
                cancelBtnTxt: '知道了'
              })
            }
          })
        }
      })
    },
    doLogin() {
      const that = this
      return new Promise((resolve, reject) => {
        doLogin({ agentId: that.$route.query.state, code: that.$route.query.code }).then(res => {
          sessionStorage.setItem('FU_USERID', res)
          resolve()
        })
      })
    },
    getCusId() {
      const that = this
      return new Promise((resolve, reject) => {
        sdkConfig({ url: window.location.href.split('#')[0], crop_agentId: that.$route.query.state }).then(res => {
          that.$wx.config({
            beta: true,
            debug: false,
            appId: res.corpid,
            timestamp: res.timestamp,
            nonceStr: res.nonceStr,
            signature: res.signature,
            jsApiList: ['agentConfig', 'getCurExternalContact']
          })
        })
        that.$wx.ready(function() {
          sdkAgentConfig({ url: window.location.href.split('#')[0], crop_agentId: that.$route.query.state }).then(res => {
            that.$wx.agentConfig({
              corpid: res.corpid,
              agentid: that.$route.query.state,
              timestamp: res.timestamp,
              nonceStr: res.nonceStr,
              signature: res.signature,
              jsApiList: ['getCurExternalContact'],
              success: function(res) {
                that.$wx.invoke('getCurExternalContact', {}, function(res) {
                  if (res.err_msg == 'getCurExternalContact:ok') {
                    sessionStorage.setItem('EXTERNAL_USERID', res.userId)
                    resolve()
                  } else {
                    that.$dialog({
                      id: 'my-dialog',
                      content: 'sdkAgentConfig注册失败，无法获取客户信息！',
                      noOkBtn: true,
                      cancelBtnTxt: '知道了'
                    })
                  }
                })
              },
              fail: function(res) {
                if (res.errMsg.indexOf('function not exist') > -1) {
                  that.$dialog({
                    id: 'my-dialog',
                    content: '版本过低请升级',
                    noOkBtn: true,
                    cancelBtnTxt: '知道了'
                  })
                }
              }
            })
          })
        })
      })
    }
  }
}
</script>

<style lang="scss" >
.cusAndCar-info-tab {
    height:100%;
    .nut-tab {
      height: 100%;
      .nut-tab-item{
        height: calc(100% - 55px);
        scrollbar-width: none; /* firefox */
        -ms-overflow-style: none; /* IE 10+ */
        overflow-y: auto;
      }
      .nut-tab-item::-webkit-scrollbar {
        display: none; /* Chrome Safari */
      }
    }
  }
</style>
